<!-- 
 * 归档组件
 * @author: 
 * @since: 2022-10-19
 * index.vue
-->
<template>
  <div class="demandEnteringAbutmentResult-container p20 detailsPageBox">
    <div class="detailsMain">
      <div class="demand-info">
        <div class="title">
          <div class="line"></div>
          <div class="word">需求方信息</div>
        </div>
        <div class="demand-base-info">
          <el-row class="one common">
            <el-col :span="8" class="item">
              <div class="key">需求名称：</div>
              <div class="value">{{ state.info.demandTitle }}</div>
            </el-col>
            <el-col :span="8" class="item">
              <div class="key">需求所属领域：</div>
              <div class="value">{{ state.info.industryNameOne }}</div>
            </el-col>
            <el-col :span="8" class="item">
              <div class="key">投资预算：</div>
              <div class="value">{{ state.info.demandBudget }}</div>
            </el-col>
          </el-row>
          <el-row class="two common">
            <el-col :span="8" class="item">
              <div class="key">需求联系人：</div>
              <div class="value">{{ state.info.demandContactPerson }}</div>
            </el-col>
            <el-col :span="8" class="item">
              <div class="key">需求联系电话：</div>
              <div class="value">{{ state.info.demandContactPhone }}</div>
            </el-col>
            <el-col :span="8" class="item">
              <div class="key">需求所在地：</div>
              <div class="value">{{ state.info.detailAddress }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="achievement-info">
        <div class="title">
          <div class="line"></div>
          <div class="word">成果方信息</div>
        </div>
        <div class="abutmentList" v-for="(item, index) in state.achievementList" :key="index">
          <el-checkbox label="是否对接" v-model="item.isSelect" v-if="props.type == 1" />
          <el-form :model="item" label-position="right" label-width="120px" class="achievement-form">
            <el-row>
              <el-col :span="11">
                <el-form-item label="成果名称：" class="key">
                  <span>{{ item.supplyTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="11" :class="[item.isSelect ? '' : 'isHidden', 'abutmentMoney']">
                <el-col :span="22">
                  <el-form-item label="对接金额：" class="key">
                    <el-input v-model="item.joinMoney" type="number" placeholder="请输入对接金额" />
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="unit">万元</el-col>
              </el-col>
              <el-col :span="2" class="arrows" @click="clickArrows(item, 1)">
                <svg-icon :name="item.isHide ? 'below-s' : 'top-s'" size="12px" color="#ccc"></svg-icon>
              </el-col>
            </el-row>
            <el-row v-if="!item.isHide">
              <el-col :span="24">
                <el-form-item label="所属领域：" class="key">
                  <span>{{ item.info.industryNameOne }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="成果所在地：" class="key">
                  <span>{{ item.info.detailAddress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="合作金额：" class="key">
                  <span>{{ item.info.resultBudget }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="截止日期：" class="key">
                  <span>{{ item.info.resultExpirationDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="成果联系人：" class="key">
                  <span>{{ item.info.resultContactPerson }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="成果联系电话：" class="key">
                  <span>{{ item.info.resultContactPhone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="achievement-info">
        <div class="title">
          <div class="line"></div>
          <div class="word">专利方信息</div>
        </div>
        <div class="abutmentList" v-for="(item, index) in state.patentList" :key="index">
          <el-checkbox label="是否对接" v-model="item.isSelect" v-if="props.type == 1" />
          <el-form :model="item" label-position="right" label-width="120px" class="achievement-form">
            <el-row>
              <el-col :span="11">
                <el-form-item label="专利名称：" class="key">
                  <span>{{ item.supplyTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="11" :class="[item.isSelect ? '' : 'isHidden', 'abutmentMoney']">
                <el-col :span="22">
                  <el-form-item label="对接金额：" class="key">
                    <el-input v-model="item.joinMoney" type="number" placeholder="请输入对接金额" />
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="unit">万元</el-col>
              </el-col>
              <el-col :span="2" class="arrows" @click="clickArrows(item, 2)">
                <svg-icon :name="item.isHide ? 'below-s' : 'top-s'" size="12px" color="#ccc"></svg-icon>
              </el-col>
            </el-row>
            <el-row v-if="!item.isHide">
              <el-col :span="24">
                <el-form-item label="专利名称：" class="key">
                  <span>{{ item.supplyTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="专利号：" class="key">
                  <span>{{ item.info.pn }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="申请人：" class="key">
                  <span>{{ item.info.an }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="发明人：" class="key">
                  <span>{{ item.info.in }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="地址：" class="key">
                  <span>{{ item.info.ns }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="detailsHandleBtn" v-if="props.type == 1">
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
      <el-button size="mini" type="primary" @click="cancel" color="#F74B33">取消对接</el-button>
      <el-button size="mini" @click="rest">重置</el-button>
    </div>
    <el-dialog v-model="isShowDialog" title="取消对接" width="540px" :before-close="closeDialog">
      <el-input v-model="state.reason" :rows="10" type="textarea" placeholder="请填写取消对接原因" />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="cancelAbutmentConfirm" size="mini">确定</el-button>
          <el-button @click="cancelAbutmentCancel" size="mini">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref, defineProps } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { sessionstorage } from '@/utils/storage.js'
import { getDetailsByIdApi, abutmentMoneyApi, cancelAbutmentApi, getDetailsByIdFinishApi } from '@/api/interface/match.js'
import { ElMessage } from 'element-plus'
import { detailHandleFinish } from '@/utils/common.js'
const store = useStore();
const router = useRouter();

const state = reactive({
  demandItem: {},
  detailsData: {},
  info: {},//成果方详细信息
  achievementList: [],//成果方数据
  patentList: [],//专利方数据
  reason: '',//取消对接原因
})

const props = defineProps({
  type: {//1---从归档按钮进 2---从详情进
    type: Number,
  }
})


const isShowDialog = ref(false)

onMounted(() => {
  const level = router.currentRoute.value.meta.level
  store.dispatch('setting/setRouterCut', level);
  state.demandItem = sessionstorage.get('demandItem')

  if (state.demandItem.id) {
    const params = {
      needId: state.demandItem.id
    }
    if (props.type == 1) {//根据id获取详情----对接中
      getDetailsByIdApi(params).then(res => {
        com(res)
      })
      return
    } else {//根据id获取详情----已经完成对接
      getDetailsByIdFinishApi(params).then(res => {
        com(res)
      })
      return
    }

  }
})

onUnmounted(() => {
  store.dispatch('setting/setRouterCut', 2);
})

const com = (res) => {
  const { status, data } = res
  if (status === 200) {
    state.detailsData = data
    state.info = data.info
    state.achievementList = data.group.SYSTEM_LIBRARY.map(item => ({
      ...item,
      isHide: true,
      isSelect: false,
      joinMoney: null
    }))
    state.patentList = data.group.PATENT_LIBRARY.map(item => ({
      ...item,
      isHide: true,
      isSelect: false,
      joinMoney: null
    }))
    if (state.patentList.length > 0) {
      state.patentList.forEach(item => {
        for (let key in item.info) {
          if (Array.isArray(item.info[key])) {
            if (key === "ns") {
              item.info[key] = item.info[key].join('-')
            } else {
              item.info[key] = item.info[key].join(',')
            }

          }
        }
      })

    }
  }
}


//点击箭头
const clickArrows = (item, type) => {//type---1.成果 2.专利
  if (type == 1) {
    state.achievementList.forEach(val => {
      if (item.supplyId === val.supplyId) {
        item.isHide = !item.isHide
      }
    })
  } else {
    state.patentList.forEach(val => {
      if (item.supplyId === val.supplyId) {
        item.isHide = !item.isHide
      }
    })

  }


}


//提交
const submit = () => {
  const flag1 = state.achievementList.findIndex(item => item.isSelect === true)
  const flag2 = state.patentList.findIndex(item => item.isSelect === true)
  if (flag1 === -1 && flag2 === -1) {//没选择数据
    ElMessage({
      message: '至少选择一条对接方信息',
      type: 'warning',
    })
    return
  }
  const selectData1 = state.achievementList.filter(item => item.isSelect === true)
  const selectData2 = state.patentList.filter(item => item.isSelect === true)
  const isWriteMoney1 = selectData1.every(item => item.joinMoney)
  const isWriteMoney2 = selectData2.every(item => item.joinMoney)

  if (!isWriteMoney1 || !isWriteMoney2) {//没填写金额
    ElMessage({
      message: '必须填写对接金额',
      type: 'warning',
    })
    return false
  }
  let newArray = []
  if (selectData1.length > 0 && selectData2.length > 0) {
    let data = selectData1.map(k => ({
      supplyId: k.supplyId,
      needId: state.detailsData.needId,
      joinMoney: k.joinMoney
    }))
    let data2 = selectData2.map(k => ({
      supplyId: k.supplyId,
      needId: state.detailsData.needId,
      joinMoney: k.joinMoney
    }))
    newArray = [...data, ...data2]
  }
  else if (selectData1.length > 0) {
    newArray = selectData1.map(k => ({
      supplyId: k.supplyId,
      needId: state.detailsData.needId,
      joinMoney: k.joinMoney
    }))

  }
  else if (selectData2.length > 0) {
    newArray = selectData2.map(k => ({
      supplyId: k.supplyId,
      needId: state.detailsData.needId,
      joinMoney: k.joinMoney
    }))

  }
  const params = {
    editMatchModelList: newArray
  }
  abutmentMoneyApi(params).then(res => {
    detailHandleFinish(res, 'Match', 1)
  })
}

//取消对接
const cancel = () => {
  isShowDialog.value = true
}

//重置
const rest = () => {
  state.achievementList.forEach(item => {
    item.joinMoney = null
  })
  state.patentList.forEach(item => {
    item.joinMoney = null
  })
}

//取消对接确定
const cancelAbutmentConfirm = () => {
  if (!state.reason) {
    ElMessage({
      message: '需填写取消对接原因',
      type: 'warning',
    })

  } else {
    const params = {
      needId: state.info.id,
      offCause: state.reason
    }
    cancelAbutmentApi(params).then(res => {
      detailHandleFinish(res, 'Match', 1)
      isShowDialog.value = false

    })

  }


}
//取消对接取消
const cancelAbutmentCancel = () => {
  isShowDialog.value = false
  state.reason = ''
}


</script>

<style lang="scss" scoped>
.demandEnteringAbutmentResult-container {
  :deep(.el-dialog__body) {
    padding: 10px 20px;
  }
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    .line {
      width: 6px;
      background: #00a2ff;
      height: 16px;
    }
    .word {
      color: #333333;
      font-size: 18px;
      font-weight: bold;
      margin-left: 10px;
    }
  }
  .demand-base-info {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 20px;
    .common {
      width: 100%;
      .item {
        font-size: 16px;
        display: flex;
        color: #333333;
        .key {
          font-weight: bold;
        }
      }
    }
    .one {
      margin-bottom: 20px;
    }
  }
  .achievement-info {
    margin-top: 30px;
    .abutmentList {
      display: flex;
      .achievement-form {
        flex: 1;
        background: #f5f7fd;
        border-radius: 4px;
        padding: 20px;
        margin: 0 0 20px 20px;
        .key {
          :deep(.el-form-item__label) {
            font-weight: bold !important;
            color: #333 !important;
          }
        }
      }
      .abutmentMoney {
        display: flex;
        flex: 1;
        .unit {
          color: #333333;
          font-size: 12px;
          height: 32px;
          line-height: 32px;
        }
      }
      .isHidden {
        visibility: hidden;
      }
      .arrows {
        text-align: right;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;
        height: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>
